<template>
  <inline-Modal :visible="visible">
    <div class="annotationsListPage-container">
      <div class="screen-conditions-container">
        <ScreenConditions :isDataType="false">
          <template slot="conditions">
            <a-tree-select
              class="project-select"
              v-model="condition.contentsId"
              show-search
              placeholder="请选择目录名称"
              :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
              tree-default-expand-all
              :loading="condition.treeLoading"
              treeNodeFilterProp="title"
              :replaceFields="{
                children: 'children',
                title: 'nodeName',
                key: 'uuid',
                value: 'id',
              }"
              :tree-data="treeData"
              @change="changeContents"
            >
            </a-tree-select>
            <a-select
              placeholder="请选择图纸名称"
              v-model="condition.cadFileUuid"
              @change="search()"
            >
              <a-select-option
                :value="item.uuid"
                v-for="item in drawingSource"
                :key="item.uuid"
              >
                {{ item.fileName }}
              </a-select-option>
            </a-select>
            <a-input
              v-model="condition.issueName"
              placeholder="请输入问题名称"
            ></a-input>
            <a-select
              placeholder="请选择问题类型"
              v-model="condition.issueType"
            >
              <a-select-option
                :value="item.dicItemCode"
                v-for="item in issueTypeSoucre"
                :key="item.dicItemCode"
              >
                {{ item.dicItemName }}
              </a-select-option>
            </a-select>
            <a-select
              placeholder="请选择问题等级"
              v-model="condition.issueGrade"
            >
              <a-select-option
                :value="item.dicItemCode"
                v-for="item in issueGradeSoucre"
                :key="item.dicItemCode"
              >
                {{ item.dicItemName }}
              </a-select-option>
            </a-select>
            <a-range-picker
              format="YYYY-MM-DD"
              valueFormat="YYYY-MM-DD"
              v-model="condition.date"
              :show-time="false"
              :placeholder="['期望修改开始日期', '期望修改结束日期']"
            />
          </template>
          <template slot="operate">
            <a-button class="cu-btn-primary" icon="search" @click="search()">
              查询
            </a-button>
            <a-button class="cu-btn-filter" icon="reload" @click="reset()">
              重置
            </a-button>

            <a-button class="back-button" @click="goBack()">返回</a-button>
          </template>
        </ScreenConditions>
      </div>
      <div class="annotationsListPage-body">
        <div class="annotation-table-list">
          <vxe-table
            ref="xTable"
            height="99%"
            align="center"
            show-overflow
            show-header-overflow
            border="inner"
            :data="tableData"
            :column-config="{ resizable: true }"
            size="small"
            :loading="loading"
          >
            <vxe-column type="seq" width="80" title="序号"></vxe-column>
            <vxe-column field="issueName" title="问题名称" align="left">
            </vxe-column>
            <vxe-column field="cadCode" title="图纸编号" align="left">
            </vxe-column>
            <vxe-column field="issueDesc" title="问题描述" align="left">
            </vxe-column>
            <vxe-column field="dealOpinion" title="处理意见"> </vxe-column>
            <vxe-column field="dealUser" title="处理人"> </vxe-column>
            <vxe-column field="dealTime" title="处理时间"> </vxe-column>
            <vxe-column title="文件">
              <template #default="{ row }">
                <div class="files-icon">
                  <!-- 预览 -->
                  <a-tooltip placement="top">
                    <template slot="title">
                      预览
                    </template>
                    <a-icon type="eye" @click="handlePreview(row.dealImage)" />
                  </a-tooltip>
                  <!-- 下载 -->
                  <a-tooltip placement="top">
                    <template slot="title">
                      下载
                    </template>
                    <a-icon
                      type="download"
                      @click="downloadFile(row.dealImage)"
                    />
                  </a-tooltip>
                </div>
              </template>
            </vxe-column>
            <vxe-column field="remark" title="备注"> </vxe-column>
            <vxe-column field="operate" width="100" title="操作" fixed="right">
              <template #default="{ row }">
                <div class="text-button-group">
                  <a-tooltip>
                    <template slot="title">
                      处理记录
                    </template>
                    <icon-fonts
                      icon="icon-shenpi"
                      class="record"
                      @change="handleRecord(row)"
                    ></icon-fonts>
                  </a-tooltip>
                </div>
              </template>
            </vxe-column>
          </vxe-table>
        </div>
        <div class="table-pager">
          <vxe-pager
            size="small"
            background
            :current-page.sync="pager.page"
            :page-size.sync="pager.pageSize"
            :total="pager.total"
            :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'Sizes']"
            :page-sizes="[20, 50, 100, 500]"
            @page-change="paginationChange"
          >
            <template #left>
              <div class="vxe-pager-left-tip-container">
                共<span>{{ pager.total }}</span
                >条
              </div>
            </template>
          </vxe-pager>
        </div>
      </div>
    </div>
    <!-- 详情 -->
    <detailAnnotationsModal
      :visible.sync="detailAnnotationsModal.visible"
      :parameter="detailAnnotationsModal.soucre"
    ></detailAnnotationsModal>
    <!-- 处理 -->
    <handleProblemModal
      :visible.sync="handleProblemModal.visible"
      :parameter="handleProblemModal.soucre"
      :operateType="handleProblemModal.operateType"
      :footer="handleProblemModal.footer"
      @onRefresh="getRefresh()"
    ></handleProblemModal>

    <!-- 附件列表 -->
    <filePreview
      :visible.sync="filePreview.visible"
      :fileList="filePreview.fileList"
    >
    </filePreview>

    <!-- 单文件预览 -->
    <previewModal
      ref="previewModal"
      :visible.sync="previewModal.visible"
      :loading="previewModal.loading"
    ></previewModal>
  </inline-Modal>
</template>

<script>
//处理意见【列表】
import { axios } from "@/utils/request";
import { addAttributeByKey } from "@/utils/util.js";
import { mapGetters } from "vuex";
import { getToken, downloadDfs } from "@/utils/TopVUI";
import ScreenConditions from "@/components/extendCustom/ScreenConditions";
//详情
import detailAnnotationsModal from "./detailAnnotationsModal.vue";
//处理问题
import handleProblemModal from "./handleProblemModal.vue";
//附件列表
import filePreview from "@/components/extendCustom/file-preview";
//单个预览
import previewModal from "@/pages/document/minio/previewModal";
import { pageAnnotations } from "@/api/design";
import { getDicItemByCode } from "@/api/common.js";
export default {
  inject: ["drawingModel"],
  components: {
    ScreenConditions,
    detailAnnotationsModal,
    handleProblemModal,
    filePreview,
    previewModal,
  },
  props: {
    visible: {
      type: Boolean,
      required: false,
    },
    parameter: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      //问题类型
      issueTypeSoucre: [],
      //问题等级
      issueGradeSoucre: [],
      pageModule: 7,
      //查询条件
      condition: {
        //目录id
        contentsId: undefined,
        //图纸名称
        cadFileUuid: undefined,
        //问题名称
        issueName: "",
        //问题类型
        issueType: undefined,
        //问题等级
        issueGrade: undefined,
        // 期望修改日期
        date: [],
      },
      //目录名称
      treeData: [],
      //图纸名称
      drawingSource: [],
      //列表
      loading: false,
      tableData: [],
      pager: {
        page: 1,
        pageSize: 50,
        total: 0,
      },
      //详情
      detailAnnotationsModal: {
        visible: false,
        soucre: {},
      },
      //处理问题
      handleProblemModal: {
        visible: false,
        soucre: {},
        operateType: 1,
        footer: {},
      },
      //附件列表
      filePreview: {
        visible: false,
        fileList: [],
      },
      //预览
      previewModal: {
        visible: false,
        loading: false,
      },
    };
  },
  computed: {
    ...mapGetters(["configData"]),
    kkFileView() {
      let index = this.configData.findIndex(
        (item) => item.code === "kkFileView"
      );
      if (index >= 0) {
        return this.configData[index].value;
      } else {
        return "http://192.168.1.216:8012/onlinePreview";
      }
    },
  },
  watch: {
    visible: {
      handler(val) {
        if (val) {
          Promise.all([
            this.getUploadTreeData(),
            this.getTableData(),
            this.getData(),
          ]);
        }
      },
      immediate: true,
    },
  },
  methods: {
    async getData() {
      //问题类型
      this.issueTypeSoucre = await this.getDicCodeData("issueTypeSJ");
      //问题等级
      this.issueGradeSoucre = await this.getDicCodeData("issueGrade");
    },
    //查询字典表
    getDicCodeData(dicCode = "") {
      return new Promise((resolve, reject) => {
        getDicItemByCode({ code: dicCode })
          .then((res) => {
            let { data } = res;
            resolve(data);
          })
          .catch((_) => {
            reject();
          })
          .finally((_) => {});
      });
    },

    getRefresh() {
      this.getTableData();
    },

    analysisPath(files = "[]") {
      let list = JSON.parse(files ?? "[]");
      return list;
    },
    //预览
    handlePreview(files = "[]") {
      let list = this.analysisPath(files);
      if (list.length > 1) {
        this.filePreview.fileList = list;
        this.filePreview.visible = true;
        return;
      }
      let { url } = list?.[0] ?? {};
      if (!url) {
        this.$message.warning("文件不存在", 1.5);
        return;
      }
      this.previewModal.loading = true;
      this.$refs.previewModal.type = "file";
      this.$refs.previewModal.fileUrl =
        this.kkFileView +
        "/onlinePreview?url=" +
        encodeURIComponent(Base64.encode(url)) +
        "&watermarkTxt=" +
        //水印内容
        encodeURIComponent("") +
        "&token=" +
        getToken();
      this.previewModal.visible = true;
      this.previewModal.loading = false;
    },
    //下载
    downloadFile(files = "[]") {
      let list = this.analysisPath(files);
      if (list.length > 1) {
        this.filePreview.fileList = list;
        this.filePreview.visible = true;
        return;
      }
      let { url } = list?.[0] ?? {};
      if (!url) {
        this.$message.warning("文件不存在", 1.5);
        return;
      }
      downloadDfs(url);
    },

    search() {
      this.pager.page = 1;
      this.getTableData();
    },

    reset() {
      this.condition.cadFileUuid = undefined;
      this.condition.issueName = "";
      this.condition.issueType = undefined;
      this.condition.issueGrade = undefined;
      this.condition.date = [];
      this.search();
    },

    //选择目录
    changeContents() {
      this.condition.cadFileUuid = undefined;
      this.handleUploadTable();
    },

    //查询目录名称
    getUploadTreeData() {
      let { proCode, uuid = "", fileSource } = this.drawingModel();
      return new Promise((resolve, reject) => {
        axios
          .post(
            `/probusiness/drawingReview/getTreeByProCodeInner`,
            {
              proCode,
              uuid,
              type: this.pageModule,
              addClassifyIdLs: [],
              deleteClassifyIdLs: [],
              fileSource,
            },
            {
              headers: {
                "Content-Type": "application/json",
              },
            }
          )
          .then((res) => {
            let { data } = res;
            let source = data ?? [];
            let filterData = addAttributeByKey(
              null,
              "scopedSlots",
              { icon: "custom" },
              source,
              "children"
            );
            this.treeData = filterData;
            this.condition.contentsId = this.treeData?.[0]?.id ?? undefined;
            this.handleUploadTable();
            resolve();
          })
          .catch((_) => {
            this.condition.contentsId = undefined;
            this.treeData = [];
            reject();
          })
          .finally((_) => {});
      });
    },

    //查询图纸名称
    handleUploadTable() {
      let { contentsId } = this.condition;
      let { proCode, uuid = "" } = this.drawingModel();
      if (!proCode || !contentsId) {
        return;
      }
      axios
        .post(
          `/probusiness/bimCadFile/getListByForeignKey`,
          {
            classifyId: contentsId,
            proCode,
            type: this.pageModule,
            uuid,
            addFileIdLs: [],
            deleteFileIdLs: [],
          },
          {
            headers: {
              "Content-Type": "application/json",
            },
          }
        )
        .then((res) => {
          let { data } = res;
          this.drawingSource = data ?? [];
        })
        .catch((_) => {
          this.drawingSource = [];
        })
        .finally((_) => {});
    },

    //查询列表数据
    getTableData() {
      this.loading = true;
      let { page, pageSize } = this.pager;
      let {
        cadFileUuid = "",
        issueName,
        issueType = "",
        issueGrade = "",
        date,
      } = this.condition;
      let { uuid } = this.drawingModel();
      return new Promise((resolve, reject) => {
        pageAnnotations({
          page,
          pageSize,
          drawingReviewUuid: uuid,
          cadFileUuid,
          issueName,
          issueType,
          issueGrade,
          startTime: date?.[0] ?? "",
          endTime: date?.[1] ?? "",
        })
          .then((res) => {
            this.tableData = res.data?.rows || [];
            this.pager.total = res.data?.totalCount || 0;
            resolve();
          })
          .catch((_) => {
            this.tableData = [];
            this.pager.total = 0;
            reject();
          })
          .finally((_) => {
            this.loading = false;
          });
      });
    },

    //处理记录
    handleRecord(row) {
      this.handleProblemModal.operateType = 2;
      this.handleProblemModal.soucre = row;
      this.handleProblemModal.footer = { footer: null };
      this.handleProblemModal.visible = true;
    },

    //监听分页切换
    paginationChange({ currentPage, pageSize }) {
      this.pager.page = currentPage;
      this.pager.pageSize = pageSize;
      this.getTableData();
    },

    //返回
    goBack() {
      this.$emit("update:visible", false);
      this.$parent.getTableData();
    },
  },
};
</script>

<style lang="less" scoped>
.modal-full-layout {
  background-color: #f0f2f5;
  /deep/.header {
    display: none;
  }
  /deep/.main {
    padding: 0;
    overflow: hidden !important;
  }
  .annotationsListPage-container {
    height: 100%;
    overflow: hidden;
    display: flex;
    flex-direction: column;

    .screen-conditions-container {
      .conditions-screening-container {
        padding-right: 200px;
      }

      .more {
        cursor: pointer;
        font-size: 14px;
        color: #1890ff;
        margin-left: 10px;
        padding-top: 6px;
        .anticon {
          font-size: 12px;
        }
      }
    }

    .back-button {
      position: absolute;
      right: 16px;
    }
    .submit-button {
      position: absolute;
      right: 86px;
    }

    .card-container {
      padding: 0 0 10px 0;
      box-sizing: border-box;
      .card-dom {
        height: 120px;
        padding: 0 32px;
        box-sizing: border-box;
        background: @base-bg-color;
        border-radius: 6px 6px 6px 6px;
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .icon {
          width: 88px;
          height: 88px;
        }

        .warp {
          flex: 1;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding-left: 16px;
          box-sizing: border-box;
          .name {
            font-size: 14px;
            color: #666666;
          }
          .money {
            font-size: 40px;
            color: #333333;
            span {
              font-size: 14px;
              color: #666666;
            }
          }
        }
      }
      /deep/.ant-row {
        :nth-child(1) {
          .card-dom {
            .icon {
              background: url("./images/icon_1.png") no-repeat center;
              background-size: 100% 100%;
            }
          }
        }
      }
    }

    .annotationsListPage-body {
      border-radius: 6px 6px 6px 6px;
      flex: 1;
      background-color: @base-bg-color;
      flex-shrink: 0;
      position: relative;
      padding: 10px;
      box-sizing: border-box;
      display: flex;
      flex-direction: column;
      .annotation-table-list {
        flex: 1;
        .files-icon {
          /deep/.anticon {
            cursor: pointer;
            font-size: 18px;
            color: #1677ff;
            margin-right: 16px;
            &:last-of-type {
              margin-right: 0;
            }
          }

          /deep/.anticon-download {
            color: #239b53;
          }

          /deep/.anticon-cloud-upload {
            color: #239b53;
          }
        }
      }
    }
  }
}
</style>
